Blocking Resources

Quan sát cách script và stylesheet render-blocking làm trễ hiển thị trang.

⚠️ Demo này cần Express server local. Chạy cd "2. Blocking Resource/resource-server" && npm install && node server.js sau đó reload trang.

Cách Kiểm Tra

Khởi động resource server (node server.js trong resource-server/)
Mở DevTools → tab Network, tắt cache
Reload trang và quan sát waterfall
Chú ý cách CSS và JS ngoài chặn việc parse HTML cho đến khi tải xong
So sánh thời gian tải khi có và không có blocking resource

Luồng Render

CSS render-blocking — Trình duyệt phải tải và parse toàn bộ CSS trước khi xây dựng Render Tree
JS parser-blocking — Thẻ <script> không có async/defer dừng việc parse HTML cho đến khi script thực thi xong
Giải pháp — Dùng async/defer cho script, inline Critical CSS, và lazy-load style không quan trọng

Mẹo DevTools

Tab Network → Waterfall — Tìm các thanh xám dài trước khi DOMContentLoaded kích hoạt
Tab Performance — Ghi page load và kiểm tra sự kiện Parse HTML, Evaluate Script
Tab Coverage — Tìm CSS/JS không dùng mà không nên chặn render